<template>
    <a-dropdown>
        <HeaderButton :theme="props.theme" class="user-info">
            <img v-image="userinfoStore.getUserinfo.avatar" class="avatar" />
            {{ userinfoStore.getUserinfo.realname }} <caret-down-outlined class="down-arrow" />
        </HeaderButton>
        <template #overlay>
            <a-menu @click="onDropdownClick">
                <a-menu-item key="userinfo">
                    <UserOutlined />
                    个人中心
                </a-menu-item>
                <a-menu-item key="setting">
                    <SettingOutlined />
                    系统设置
                </a-menu-item>
                <a-menu-item key="password">
                    <LockOutlined />
                    密码修改
                </a-menu-item>
                <a-menu-item key="clear">
                    <SyncOutlined />
                    清理缓存
                </a-menu-item>
                <a-menu-item key="logout">
                    <LogoutOutlined />
                    退出系统
                </a-menu-item>
            </a-menu>
        </template>
    </a-dropdown>
    <pass-modal ref="passModalRef" />
    <setting-drawer ref="settingRef" />
</template>
<script setup>
import { ref } from 'vue'
import { SettingOutlined, LockOutlined, SyncOutlined, UserOutlined, LogoutOutlined, CaretDownOutlined } from '@ant-design/icons-vue'
import { useTokenStore, useUserinfoStore } from '@iframe/tools/store'
import { logout } from '/@/api/Iframe/login'
import { useRouter } from 'vue-router'
import { clearCache } from '/@/api/Iframe/Cache'
import { SUCCESS_CODE } from '@iframe/tools/axios/axios'
import { notice, confirm } from '@iframe/tools/components'
import HeaderButton from '/@/components/HeaderButton/index.vue'
import PassModal from './../ResetPass/Modal.vue'
import SettingDrawer from './../Setting/Drawer.vue'

const tokenStore = useTokenStore()
const userinfoStore = useUserinfoStore()

const router = useRouter()
const props = defineProps({
    theme: {
        type: String
    }
})

const passModalRef = ref()
const settingRef = ref()
const onDropdownClick = ({ key }) => {
    if (key === 'userinfo') {
        router.push('/system/userinfo')
    } else if (key === 'password') {
        passModalRef.value.open()
    } else if (key === 'setting') {
        settingRef.value.open()
    } else if (key === 'clear') {
        clearCache().then(result => {
            if (result.code === SUCCESS_CODE) {
                notice.success('清除成功')
            }
        })
    } else if (key === 'logout') {
        confirm('确定要注销登录吗？').then(() => {
            logout().then(result => {
                if (result.code === SUCCESS_CODE) {
                    notice.success('退出登录成功')
                    tokenStore.clearToken()
                    userinfoStore.clearUserinfo()
                    router.push('/login')
                }
            })
        })
    }
}
</script>
<style lang="less" scoped>
.user-info {
    height: 64px;
    .avatar {
        width: 24px;
        height: 24px;
        border-radius: 24px;
        margin-right: 5px;
    }
    .down-arrow {
        margin-left: 3px;
    }
}
</style>
